<template>
  <view class="container">
    <!-- 地址列表 -->
    <view class="address-list" v-if="addressList.length > 0">
      <view class="address-item" v-for="(item, index) in addressList" :key="index">
        <view class="info">
          <view class="user-info">
            <text class="name">{{item.name}}</text>
            <text class="phone">{{item.phone}}</text>
          </view>
          <view class="address">{{item.province}}{{item.city}}{{item.district}}{{item.address}}</view>
        </view>
        <view class="operations">
          <view class="edit" @click="editAddress(item)">
            <uni-icons type="compose" size="20" color="#666"></uni-icons>
          </view>
          <view class="delete" @click="deleteAddress(item)">
            <uni-icons type="trash" size="20" color="#666"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty" v-else>
      <image src="/static/images/empty-goods.png" mode="aspectFit"></image>
      <text>暂无收货地址</text>
    </view>

    <!-- 添加地址���钮 -->
    <view class="add-btn" @click="addAddress">
      <button type="primary">新增收货地址</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { config } from '@/utils/config.js'

// 地址列表数据
const addressList = ref([])

// 获取地址列表
const getAddressList = async () => {
  try {
    const res = await uni.request({
      url: config.baseUrl + '/api/address/list',
      method: 'GET',
      header: {
        'Authorization': `Bearer ${uni.getStorageSync('token')}`
      }
    })
    
    if (res.data.code === 200) {
      addressList.value = res.data.data
    } else {
      throw new Error(res.data.message)
    }
  } catch (error) {
    console.error('获取地址列表失败:', error)
    uni.showToast({
      title: '获取地址列表失败',
      icon: 'none'
    })
  }
}

// 新增地址
const addAddress = () => {
  uni.navigateTo({
    url: '/pages/address/edit'
  })
}

// 编辑地址
const editAddress = (item) => {
  // 将完整的地址数据传递给编辑页面
  const query = encodeURIComponent(JSON.stringify({
    id: item.id,
    name: item.name,
    phone: item.phone,
    province: item.province,
    city: item.city,
    district: item.district,
    detail: item.detail,
    is_default: item.is_default
  }))
  
  uni.navigateTo({
    url: `/pages/address/edit?address=${query}`
  })
}

// 删除地址
const deleteAddress = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          const result = await uni.request({
            url: config.baseUrl + `/api/address/${item.id}`,
            method: 'DELETE',
            header: {
              'Authorization': `Bearer ${uni.getStorageSync('token')}`
            }
          })
          
          if (result.data.code === 200) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
            getAddressList()
          } else {
            throw new Error(result.data.message)
          }
        } catch (error) {
          console.error('删除地址失败:', error)
          uni.showToast({
            title: '删除失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

onMounted(() => {
  getAddressList()
})

onShow(() => {
  getAddressList()
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 120rpx;
}

.address-list {
  padding: 20rpx;

  .address-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;

    .info {
      flex: 1;
      margin-right: 20rpx;

      .user-info {
        margin-bottom: 10rpx;

        .name {
          font-size: 28rpx;
          color: #333;
          margin-right: 20rpx;
        }

        .phone {
          font-size: 28rpx;
          color: #666;
        }
      }

      .address {
        font-size: 26rpx;
        color: #666;
        line-height: 1.4;
      }
    }

    .operations {
      display: flex;
      align-items: center;

      .edit, .delete {
        padding: 10rpx;
        margin-left: 20rpx;
      }
    }
  }
}

.empty {
  padding-top: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}

.add-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20rpx 30rpx;
  background: #fff;
  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);

  button {
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 40rpx;
    font-size: 28rpx;
  }
}
</style> 